<template>
  <div>
    <div
      style="height: auto; background-color: rgb(240, 181, 181); width: 100%"
    >
      <el-button class="subButton" type="" @click="showViewList('0')"
        >全部</el-button
      >
      <el-button class="subButton" type="primary" @click="showViewList('888')"
        >最新</el-button
      >
      <el-button class="subButton" type="success" @click="showViewList('999')"
        >排行</el-button
      >
      <span v-for="(item, index) in items" :key="index">
        <el-button
          class="subButton"
          type="danger"
          @click="showViewList(item.id)"
          >{{ item.subName }}</el-button
        >
      </span>
    </div>
  </div>
</template>

<script>
import { getSubList } from "@/api/sub";
import { getListInfo } from "@/api/info";
import { EventBus } from "@/utils/event-bus";

export default {
  name: "PageButton",

  data() {
    return {
      items: [],
      infoItems: [],
      page: "1",
      size: 20,
      id: "",
      newList: [],
    };
  },
  created() {
    this.fetchList();
    //this.showViewList();
  },
  components: {},
  methods: {
    async fetchList() {
      const response = await getSubList();
      // console.log('getSubList==>',response.data)
      this.items = response.data;
    },
    async showViewList(id) {
      //console.log('button--id-->',id)
      const o = id === undefined ? "0" : id;
      console.log("button--id-->", o);
      const c = {
        type: o,
        page: this.page,
        size: this.size,
      };
      // console.log(c)
      const response = await getListInfo(c);
      // //console.log('button===>',response.data)

      this.listView = response.data;
      EventBus.$emit("buttonId", id);
      // EventBus.$emit("infoItems", this.listView);
    },
    saveDate() {
      localStorage.setItem("items", this.items);
    },
  },
  watch: {
    buttonData: {
      handler: "saveData",
      deep: true,
    },
  },
};
</script>

<style scoped>
.subButton {
  margin-left: 10px; /* 按钮之间的距离为10像素 */
  margin-top: 3px;
}
</style>
